<nz-table #nzTable
          [nzAjaxData]="tableData"
          [nzTotal]="total "
          [nzLoading]="loading"
          [(nzPageIndex)]="pageIndex"
          (nzPageIndexChange)="_refreshData()"
          [nzPageSize]="pageSize"
          (nzPageSizeChange)="_refreshData()">
  <thead nz-thead>
  <tr>
    <th nz-th [nzCheckbox]="true">
      <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate"
             (ngModelChange)="_checkAll($event)">
      </label>
    </th>
    <ng-template ngFor let-fieldObj [ngForOf]="gridView.tableFields" let-i="index">
      <th nz-th *ngIf="fieldObj.isHidden!==true"><span>{{fieldObj.text}}</span></th>
    </ng-template>
  </tr>
  </thead>
  <tbody nz-tbody>

  <tr nz-tbody-tr *ngFor="let data of nzTable.data">
    <td nz-td [nzCheckbox]="true">
      <label nz-checkbox [(ngModel)]="data.checked" (ngModelChange)="_refreshStatus($event)">
      </label>
    </td>
    <ng-template ngFor let-fieldObj [ngForOf]="gridView.tableFields" let-i="index">
      <td nz-td *ngIf="(!fieldObj.type||fieldObj.type===1)&&fieldObj.isHidden!==true">
        {{data[fieldObj.field]}}
      </td>
      <td nz-td *ngIf="(fieldObj.type&&fieldObj.type===3)&&fieldObj.isHidden!==true">
        <img src="{{data[fieldObj.field]}}" alt="">
      </td>
      <td nz-td *ngIf="(fieldObj.type&&fieldObj.type===4)&&fieldObj.isHidden!==true">
        <span *ngIf="fieldObj.pip.name==='date'">
          {{data[fieldObj.field] | date:fieldObj.pip.value}}
        </span>
        <span *ngIf="fieldObj.pip.name==='type'">
          {{data[fieldObj.field] | type:fieldObj.pip.value}}
        </span>
      </td>
      <td nz-td *ngIf="(fieldObj.type&&fieldObj.type===5)&&fieldObj.isHidden!==true" [innerHTML]="data[fieldObj.field]">
      </td>
      <td nz-td *ngIf="(fieldObj.type&&fieldObj.type===2)&&fieldObj.isHidden!==true">
        <nz-dropdown *ngIf="gridView.operations.length>1">
          <button nz-dropdown nz-button style="border: none">
            <i class="anticon anticon-bars" style="margin-right: 2px;"></i>
            <i class="anticon anticon-down"></i>
          </button>
          <ul nz-menu>
            <ng-template ngFor let-handle [ngForOf]="gridView.operations" let-i="index">
              <li nz-menu-item>
                <a href="javascript:;" *ngIf="!handle.isConfirm;else elseBlock"
                   (click)="handle.event(data[handle.key]||data.id)">{{handle.text}}</a>
                <ng-template #elseBlock>
                  <nz-popconfirm [nzTitle]="handle.title"
                                 (nzOnConfirm)="handle.event.ok(data[handle.key])"
                                 (nzOnCancel)="handle.event.cancel()">
                    <a href="javascript:;" nz-popconfirm>{{handle.text}}</a>
                  </nz-popconfirm>
                </ng-template>
              </li>
            </ng-template>
          </ul>
        </nz-dropdown>
        <button nz-button [nzType]="'primary'" *ngIf="gridView.operations.length<2"
                (click)="gridView.operations[0].event(data[gridView.operations[0].key]||data.id)">
          {{gridView.operations[0].text}}
        </button>
      </td>
    </ng-template>
  </tr>
  </tbody>
</nz-table>
